<template>
  <div class="height-full back-white" style="padding: 14px 12px">
    <div class="tabs relative ml10">
      <Tabs v-model="tabActiveValue" class="custom-tabs" @on-click="handleTabClick">
        <TabPane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.value"></TabPane>
      </Tabs>
    </div>

    <div class="list-filter" style="padding-left: 0">
      <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
        <FormItem :label-width="0" style="width: auto">
          <Tooltip
            v-permission="'article/spread/instruct'"
            content="请选择数据"
            :disabled="Boolean(selection.length)"
            placement="top"
            theme="light"
          >
            <Button type="primary" @click="handleBatchEnterPool">批量入池</Button>
          </Tooltip>
        </FormItem>

        <FormItem label="时间范围" class="width-auto">
          <TimeRange
            v-model="formData.timeType"
            @on-time-type-change="handleTimeTypeChange"
            @on-date-range-change="handleTimeRange"
          />
        </FormItem>

        <!-- <Button class="btn-search" type="primary" html-type="submit">查询</Button> -->
        <div class="btn-search f14" style="width: auto; top: 1px">
          提示：数据更新至：{{ lastUpdateTime }}
        </div>
      </Form>

      <transition name="fade" mode="out-in">
        <component
          :is="tabActiveItem.component"
          :form-data="formData"
          @on-selection-change="(s) => (selection = s)"
          @on-lastUpdateTime="(t) => (lastUpdateTime = t)"
        ></component>
      </transition>
    </div>
  </div>
</template>

<script>
import TimeRange from '@/components/customFrom/TimeRange'
import CityTopic from './components/CityTopic.vue'
import MicroblogHotspot from './components/MicroblogHotspot.vue'

import { createTabs, createForm } from './service'
import $bus from '@/utils/bus.js'

export default {
  name: 'RecommendList',

  components: { TimeRange, CityTopic, MicroblogHotspot },

  data() {
    return {
      sourceTabs: createTabs(),
      tabActiveValue: '',

      formData: createForm(),
      lastUpdateTime: '',
      selection: [],
    }
  },

  computed: {
    tabActiveItem() {
      const active = this.tabs.find((t) => t.value === this.tabActiveValue) || {}
      this.formData.type = active.type || ''
      return active
    },

    tabs() {
      return this.sourceTabs.filter((tab) => this.hasPermission(tab.url))
    },
  },

  methods: {
    handleTabClick(name) {
      this.formData = createForm()
      this.$nextTick(() => this.$router.push({ name: 'recommendList', query: { t: name } }))
    },

    handleBatchEnterPool() {
      if (!this.selection.length) return
      $bus.$emit('on-recomment-batch-enter')
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit() {
      $bus.$emit('on-recomment-list')
    },
  },

  mounted() {
    this.tabActiveValue = this.$route.query.t || this.tabs[0].value
  },
}
</script>

<style lang="less" scoped></style>
